/**
 * 放大镜 等比图
 * @param {*} el 最大盒子
 * @param {*} option 其他配置
 */
class Enlarge
{
    constructor(el,option = {}){
        this.el = document.querySelector(el)
        this.imgdiv = this.el.querySelector(".img")
        this.maskObj = this.el.querySelector(".mask")
        this.enlargeObj = this.el.querySelector(".enlarge")
        this.init()
    }
    init(){
        this.overout()
        this.move()
        this.enlargeSetWH()

    }

    overout(){
        this.imgdiv.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = "block"
        this.imgdiv.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = "none"
    }

    getStyle(tagObj, attrName) 
    {
        if (window.getComputedStyle)
        {
            return window.getComputedStyle(tagObj)[attrName]
        } else {

            return tagObj.currentStyle[attrNamea]
        }
    }

    move(){
        this.imgdiv.onmousemove = (evt) => {
            let e = evt || window.event
            let left = e.pageX - this.el.offsetLeft-this.maskObj.offsetWidth/2
            let top = e.pageY - this.el.offsetTop-this.maskObj.offsetHeight/2
            
            // 设置边界
            if (left <= 0) left = 0
            if (top <=0) top = 0
            let maxleft = this.imgdiv.offsetWidth - this.maskObj.offsetWidth
            let maxtop = this.imgdiv.offsetHeight - this.maskObj.offsetHeight
            if (top >= maxtop) top = maxtop
            if (left >= maxleft) left = maxleft

            this.maskObj.style.top=`${top}px`
            this.maskObj.style.left=`${left}px`

            // 同步放大镜
            this.tbEnlarge(left, top)
            
        }
    
    }

    /**
     * 
     * @param {Number} left 遮罩框移动坐标
     * @param {Number} top 遮罩框移动坐标
     */
    tbEnlarge(left, top)
        {
            let maskW = this.maskObj.offsetWidth
            let maskH = this.maskObj.offsetHeight
            let enlargeWidth = parseFloat(this.getStyle(this.enlargeObj, 'width'))
            let enlargeHeight = parseFloat(this.getStyle(this.enlargeObj, 'height'))
            let x = (enlargeWidth/maskW) * left
            let y = (enlargeHeight/maskH) * top
            this.enlargeObj.style.backgroundPosition = `-${x}px -${y}px`
        }

    enlargeSetWH(){

        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH = parseInt(this.getStyle(this.maskObj, 'height'))
        let enlarge = this.getStyle(this.enlargeObj, 'background-size')
        let enlargeWidth = parseInt( enlarge.split(' ')[0])
        let enlargeHeight = parseInt( enlarge.split(' ')[1])

        let imgWidth = this.imgdiv.clientWidth
        let imgHeight = this.imgdiv.clientHeight

        this.enlargeObj.style.width = `${maskW * (enlargeWidth / imgWidth)}px`
        this.enlargeObj.style.height = `${maskH * (enlargeHeight / imgHeight)}px`
    }

    }


export default Enlarge